<template>
<div id="home">
        <!-- 标题导航栏 -->
        <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
        <!-- 为了做吸顶效果，插件里面fix用不了 -->
        <tab-control class="tab-control-new" 
        :titles="titles" 
        @tabClick="tabClick" 
        v-show="isTabFixed"
        ref="tabControlNew">
        </tab-control>
        <!-- 滚动 -->
        <scroll class="content" ref="scroll" 
        :probe-type="3"  @scroll="getScrollPostition"
         :pull-up-load="true" @pullingUp="loadMore">
         <!-- 不加：传的是字符串，加了是数字 -->
                    <!-- 轮播图 -->
            <home-swiper :banners="banners" @imgHasLoad="imgHasLoad"></home-swiper>
        
            <!-- 推荐 -->
            <home-recommend-view :recommends="recommend"/>
            <home-feature></home-feature>
            <!-- 选项卡 -->

            <tab-control class="tab-control" :titles="titles" 
            @tabClick="tabClick" ref="TabControl" 
            ></tab-control>
             <!-- :class="{fixed:isTabFixed}" 没用，因为插件的引入 -->

            <good-list :goods="showGoods"></good-list>
        </scroll>
        <!-- @click.native="backTop"  组件的监听需要加这个-->
        <back-top class="back-top" @click.native="backTop" v-show="isShowBackTop"></back-top>
</div>
    
  
    
</template>

<script>

import HomeSwiper from './childComps/HomeSwiper'
import HomeRecommendView from './childComps/HomeRecommendView.vue'
import HomeFeature from './childComps/HomeFeature'


import NavBar from 'components/common/navbar/NavBar'
import TabControl from 'components/content/tabControl/TabControl'
import GoodList from 'components/content/goods/GoodList'
import Scroll from 'components/common/scroll/Scroll'
import BackTop from 'components/content/backTop/BackTop'

import {backTopMixin} from 'common/mixin'
import {
    getHomeMultidata,
    getHomeGoods
    } 
from 'network/home'

export default {
    name:"Home",
    components: {
        
        HomeSwiper,
        HomeRecommendView,
        HomeFeature,
        GoodList,
        

        NavBar,
        TabControl,
        Scroll,
        // BackTop
    },
    data () {
        return {
            banners:[],
            recommend:[],
            titles:['流行','新款','精选'],
            goods:{
                'pop':{page:1,list:[]},
                'new':{page:0,list:[]},
                'sell':{page:0,list:[]}
            },
            currentType:'pop',
            // isShowBackTop:false,
            tabOffesetTop:0,  //      <!-- 选项卡的高度 -->
            isTabFixed:false,
            saveY:0  //记着跳转前的y的位置
        }
    },
     mixins: [backTopMixin], //引入相同的封装
    created () {
        console.log("HOME created");  
        //1、请求多个数据
        this.getHomeMultidataMethod()
        //2、请求商品数据
       this.getHomeGoodsMethod("pop")
       this.getHomeGoodsMethod("new")
       this.getHomeGoodsMethod("sell")
    },
    mounted () {
    //   获取tabControl的OffsetTop的  
    // 所有的组件都有一个属性$el：用于获取组件中的元素
       
    },
    destroyed () {
      console.log("HOME销毁了");  
    },
    activated () {
        console.log("HOME activated:"+this.saveY);  
        this.$refs.scroll.refresh()
        this.$refs.scroll.scrollTo(0,this.saveY,0)
        //可以刷新一次
        
    },
    deactivated () {
        this.saveY=this.$refs.scroll.scroll.y;//离开的时候获取y值
        // console.log("HOME deactivated");  
    },
    computed: {
      showGoods(){
          return this.goods[this.currentType].list
      }  
    },
    methods: {
        /**
         * 事件监听的
         */
        // 图片加载完成确定tabControl的高度
        imgHasLoad(){
             this.tabOffesetTop=this.$refs.TabControl.$el.offsetTop;
            //  console.log(this.tabOffesetTop);
        },
        tabClick(index){
            // console.log(index)
            switch(index){
                case 0:
                    this.currentType='pop';
                    break;
                case 1:
                    this.currentType='new';
                    break;
                case 2:
                    this.currentType='sell';
                    break;
            }
            this.$refs.tabControlNew.currentIndex=index;
            this.$refs.TabControl.currentIndex=index;
        },
        // backTop(){
        //     console.log("回到顶部");
        //     // this.$refs.scroll.scroll.scrollTo(0,0,1000);//获取组件对象scroll的属性,调用里面的scrollTo方法，1000毫米回到顶部，这样不好看懂，方法写到组件里面，调用组件的方法
        //     this.$refs.scroll.scrollTo(0,0)
        // },
        getScrollPostition(positon){
            // console.log(positon);
            // 辣鸡写法,判断BackTop是否显示
            // positon.y<-1000?this.isShowBackTop=true:this.isShowBackTop=false
            this.isShowBackTop=positon.y<-1000
            // 2、判断标签菜单是否吸顶
            this.isTabFixed=(-positon.y)>this.tabOffesetTop
        },
        loadMore(){
            console.log('加载更多');
            this.getHomeGoodsMethod(this.currentType)
        },
        /**
         * 网络请求的方法
         */
        getHomeMultidataMethod(){
             getHomeMultidata().then(res=>{
                // console.log(res.data.banner)
                this.banners=res.data.banner.list;
                this.recommend=res.data.recommend.list;
            })
        },
        getHomeGoodsMethod(type){
            const page=this.goods[type].page+1;
             getHomeGoods(type,page).then(res=>{
                // console.log(res)
                this.goods[type].list.push(...res.data.list)  //可以追加数组进去 
                this.goods[type].page+=1;
            })
        }
    }
}
</script>

<style scoped>
/* scoped 属性是作用域，只对当前的页面生效，对其他的页面不影响 */
#home{
    /* padding-top: 44px; */
    padding-bottom: 49px;
    /* 视口高度 */
    height: 100vh;
    position: relative;
    /* overflow: auto; */
}
.home-nav{
    /* 使用变量 */
    background: var(--color-tint);
    color: white;
    /* 用了插件这里没必要了 */
    /* position:fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9; */
}
.tab-control{ /* 滑到44px的时候固定在上方 加了滚动行不通了*/
    /* position: sticky;
    top: 44px; */
    background: white;
    z-index: 9;
}

  /* 第一版
  .content{
      height: 100%;
      overflow: hidden;
  } */
  .content{
     position: absolute;
      overflow: hidden;
      top: 44px;
      bottom: 49px;
      left: 0;
      right: 0;
  }
    .tab-control-new{
        position: relative;
        z-index: 9;
    }
</style>